<template>
  <div class="app-container editcss">
    <div class="dheight">
      <div class="titleHeight">
        <el-row>
          <el-col>
            <screenSelect title="时间段筛选" type='daterange' v-model="queryFrom.transferDateTime"
              :isValue='queryFrom.transferDateTime' @transfer="valueHeld($event, 'transferDateTime')" class="mb15"
              width="300px" style="float: left;" />
              <screenSelect title="设备编码" type='input' v-model="queryFrom.equ_no" :isValue='queryFrom.equ_no'
              placeholder="请输入" @transfer="valueHeld($event, 'equ_no')" class=" mb15" width="200px"
              style="float: left;" />
            <el-button type="primary" class="mb15" size="small" icon="el-icon-search" v-repeatStop="{ func: search, delay: '2000' }">
              搜索
            </el-button>
            <el-button type="primary" class="mb15" size="small" icon="el-icon-refresh-left" v-repeatStop="{ func: reset, delay: '2000' }">
              重置
            </el-button>
            <!-- <el-button type="success" class="mb15" size="small" icon="el-icon-upload2" :disabled="isDeriveout" @click="deriveout">
              导出
            </el-button> -->
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" border style="width: 100%" :height="endHeight" v-loading="loading"
        element-loading-text="Loading..." element-loading-spinner="el-icon-loading">
        <el-table-column fixed type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column fixed label="设备编码" min-width="140" align="center">
          <template slot-scope="scope">
            {{ scope.row.equ_no }}
          </template>
        </el-table-column>
        <el-table-column label="所属电站" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.base_station && scope.row.base_station.name }}
          </template>
        </el-table-column>
        <el-table-column label="所属区域" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.region && scope.row.region.name }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="设备状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ equipmentstateoptions[scope.row.equipmentstate].label }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="设备电压" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.equipmentduration }}
          </template>
        </el-table-column> -->
         <el-table-column label="工作状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D002=='0'?'空闲':scope.row.D002=='1'?'清扫':scope.row.D002=='2'?'反向清扫':'清扫刷自洁'}}
          </template>
        </el-table-column>
        <el-table-column label="充电状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D003=='00'?'未充电':scope.row.D003=='10'?'光伏充电':'外充电'}}
          </template>
        </el-table-column>
        <el-table-column label="当前位置(m)" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D004}}
          </template>
        </el-table-column>
        <el-table-column label="系统工作电压/电流(mV/mA)" min-width="220" align="center">
          <template slot-scope="scope">
            {{ scope.row.D005}}
          </template>
        </el-table-column>
        <el-table-column label="主驱动电机模块工作电压/电流(mV/mA)" min-width="260" align="center">
          <template slot-scope="scope">
            {{ scope.row.D006}}
          </template>
        </el-table-column>
        <el-table-column label="辅驱动电机模块工作电压/电流(mV/mA)" min-width="260" align="center">
          <template slot-scope="scope">
            {{ scope.row.D007}}
          </template>
        </el-table-column>
        <el-table-column label="清扫电机模块工作电压/电流(mV/mA)" min-width="260" align="center">
          <template slot-scope="scope">
            {{ scope.row.D008}}
          </template>
        </el-table-column>
        <el-table-column label="限位传感器状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D009=='0'?'无触发':'触发'}}
          </template>
        </el-table-column>
        <el-table-column label="倾斜传感器状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D010=='0'?'无触发':'触发'}}
          </template>
        </el-table-column>
        <el-table-column label="打滑传感器状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D011=='0'?'无触发':'触发'}}
          </template>
        </el-table-column>
        <el-table-column label="各电机模块通讯状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D012=='0'?'通信异常':'通信正常'}}
          </template>
        </el-table-column>
        <el-table-column label="4G模块状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.D013}}
          </template>
        </el-table-column>
        <el-table-column label="状态时间" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.D017 }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="触发时间" min-width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="工作电压" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.equipmentduration }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="充电状态" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.equipmentduration }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="当前位置" min-width="300" align="center">
          <template slot-scope="scope">
            {{ scope.row.districtaddress }}
          </template>
        </el-table-column> -->
        <el-table-column label="执行结果" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.status==1?'完成':'未完成' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation_box">
              <el-button @click.native.prevent="viewRow(scope.row)" type="text" class="operation_view" size="mini">
                查看
              </el-button>
              <!-- <el-button @click.native.prevent="deleteRow(scope.row)" type="text" class="operation_delete" size="mini">
                删除
              </el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationblock" v-if="total > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageData.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.limit" :background="true"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

    </div>
    <viewconvention v-if="dialogViewVisible" :optionVal="addfrom" :dialogViewVisible.sync="dialogViewVisible" @OperationHeld="OperationHeld">
    </viewconvention>
  </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import viewconvention from './components/viewconvention.vue';
import { getequdatalog } from '@/api/caution.js'
import { formatDateskb } from '@/utils/index'
export default {
  name: 'WorkspaceJsonConvention',
  components: {
    screenSelect,
    viewconvention
  },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      dialogViewVisible: false,
      dialogOperationVisible: false,
      isDerive: false,
      isDeriveout: false,
      queryFrom: {
        equ_no:''
      },
      endHeight: 0,
      pageData: {
        page: 1,
        limit: 10
      },
      total: 0,
      tableData: [],
      powerstationoptions: [
        {
          label: 'H01',
          value: 1
        },
        {
          label: 'H02',
          value: 2
        },
        {
          label: 'H03',
          value: 3
        },
        {
          label: 'H04',
          value: 4
        },
      ],
      districtoptions: [
        {
          label: 'H01-1',
          value: 1
        },
        {
          label: 'H02-1',
          value: 2
        },
        {
          label: 'H03-1',
          value: 3
        },
        {
          label: 'H04-1',
          value: 4
        },
      ],
      equipmentstateoptions: [
        {
          label: '正常',
          value: 0
        },
        {
          label: '停止',
          value: 1
        },
        {
          label: '报警',
          value: 2
        },
        {
          label: '离线',
          value: 3
        },
        {
          label: '检修',
          value: 4
        },
      ],

      addfrom: {},
    };
  },

  mounted() {
    this.fetTableHeight()
    this.getList()
  },

  methods: {
    getList() {
      let that = this
      that.loading = true
      if (this.queryFrom.transferDateTime != '' && this.queryFrom.transferDateTime) {
        let obj = {}
        obj.start_time = formatDateskb(this.queryFrom.transferDateTime[0])
        obj.end_time = formatDateskb(this.queryFrom.transferDateTime[1])
        obj.equ_no = this.queryFrom.equ_no
        let data = this.mergeObjects(this.pageData, obj)
        getequdatalog(data).then(res => {
          if (res.code == 200) {
            that.total = res.data.count
            that.tableData = res.data.rows
            that.loading = false
          } else {
            that.$modal.msgError(res.message)
            that.loading = false
          }
        })
      } else {
        let obj = {}
        obj.equ_no = this.queryFrom.equ_no
        let data = this.mergeObjects(this.pageData, obj)
        getequdatalog(data).then(res => {
          if (res.code == 200) {
            that.total = res.data.count
            that.tableData = res.data.rows
            that.loading = false
          } else {
            that.$modal.msgError(res.message)
            that.loading = false
          }
        })
      }

    },
    cancel(e) {
      this.dialogFormVisible = e.dialogFormVisible
      this.addfrom = e.form
    },
    viewHeld(e) {
      this.dialogViewVisible = e
    },
    viewRow(row) {
      this.addfrom = JSON.parse(JSON.stringify(row))
      this.dialogViewVisible = true
      console.log(row, '查看');
    },
    deleteRow(row) {
      console.log(row, '删除');
      this.$confirm('此操作将永久删除' + row.equipmentname + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: false,
      }).then(() => {
        this.$modal.msgSuccess('成功消息')
      }).catch(() => {
        this.$modal.msg('已取消删除')
      });
    },
    mergeObjects(obj1, obj2) {
      return Object.assign({}, obj1, obj2);
    },
    search() {
      this.tableData = []
      this.pageData = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    reset() {
      this.queryFrom = {
      }
    },
    OperationHeld(e) {
      this.dialogViewVisible = e
    },
    //导出
    deriveout() {
      this.isDeriveout = true
      // getTimeExpor(this.queryFrom).then(res => {
      //   const link = document.createElement('a')
      //   const blob = new Blob([res.data], {
      //     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      //   })
      //   console.log(res);
      //   const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1].substring(7));
      //   link.setAttribute('download', fileName)
      //   link.style.display = 'none'
      //   link.href = URL.createObjectURL(blob)
      //   link.click()
      //   setTimeout(() => {
      //     this.isDerive = false
      //   }, 5000)
      // }).catch(err => {
      //   setTimeout(() => {
      //     this.isDerive = false
      //   }, 5000)
      // })
      setTimeout(() => {
        this.isDeriveout = false
      }, 5000)
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.endHeight = 0
        resolve()
      })
    },
    fetTableHeight() {
      this.resetHeight().then(res => {
        let fHeight = (window.getComputedStyle(document.querySelector('.editcss')).height).replace('px', "")
        let zHeight = (window.getComputedStyle(document.querySelector('.titleHeight')).height).replace('px', "")
        this.endHeight = (fHeight - zHeight - 96)
      })
    },
    handleSizeChange(val) {
      this.pageData.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getList()
    },
    valueHeld(childParam, fatherparam) {
      this.queryFrom[fatherparam] = childParam
    },
  },
};
</script>

<style lang="scss" scoped>
.dheight {
  border-radius: 6px;
  height: calc(100%);
  position: relative;
}

::v-deep .el-button.ch_button {
  padding: 7px 9px;
}

::v-deep .el-button.ch_button span {
  display: flex;
  align-items: center;

  i {
    font-size: 16px;
  }

  div {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
  }
}
</style>